<template>
  <div class="container">
    <div class="main">
      <div class="main_content">
        <div class="main_header">
          <a-input
            placeholder="搜索学校名称"
            style="width: 160px; height: 36px; margin-right: 10px"
            v-model="searchSchoolName"
          />
          <a-input
            placeholder="搜索系部名称"
            style="width: 160px; height: 36px; margin-right: 10px"
            v-model="searchDepartmentName"
          />
          <a-input
            placeholder="搜索班级名称"
            style="width: 160px; height: 36px; margin-right: 10px"
            v-model="searchClassName"
          />
          <a-button
            type="primary"
            style="margin-left: 10px; width: 70px; height: 36px"
            @click="toSearch"
          >
            查询
          </a-button>
          <a-button
            type="primary"
            style="margin-left: 10px; width: 70px; height: 36px"
            @click="toAdd"
            v-if="isAuth(['ROOT', 'TEACHER:INSERT'])"
          >
            新增
          </a-button>
          <a-popconfirm
            title="是否进行批量删除"
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirm2"
            @cancel="cancel2"
            :disabled="!isAuth(['ROOT', 'TEACHER:DELETE'])"
          >
            <a-button
              v-if="isAuth(['ROOT', 'TEACHER:DELETE'])"
              type="danger"
              style="margin-left: 10px; width: 98px; height: 36px"
            >
              批量删除
            </a-button>
          </a-popconfirm>
        </div>
        <div class="main_table">
          <!-- data-source 数据源,column 列名  row-selection列表项是否可选择	-->
          <!-- rowSelection 是计算属性进行加工处理 -->
          <a-table
            rowKey="id"
            :row-selection="rowSelection"
            :columns="columns"
            :data-source="data"
            :pagination="pagination"
            @change="handleTableChange"
          >
            <!-- 作用域插槽 text 本身是每一列的所有属性 但是 column的配置是 dataIndex 是avaurl 所以text 就变成了每一类的avarurl -->

            <span slot="action" slot-scope="text, record">
              <a-popconfirm
                title="请确定是否删除班级信息"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteItem(record)"
                @cancel="cancel(record)"
              >
                <a href="#" v-if="isAuth(['ROOT', 'TEACHER:UPDATE'])">删除 </a>
              </a-popconfirm>
            </span>
          </a-table>
        </div>
      </div>
    </div>
    <add-or-update
      :userid="id"
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getRoleMessage"
    ></add-or-update>
  </div>
</template>
<script>
import AddOrUpdate from "../components/teacherManager-add-or-update.vue";
export default {
  components: {
    AddOrUpdate,
  },
  data() {
    return {
      //删除中多选中的id列表
      idList: [],
      // 搜索框内容
      searchSchoolName: "",
      searchDepartmentName: "",
      searchClassName: "",
      // 静态模态的出现
      addOrUpdateVisible: false,
      // 列名
      columns: [
        // title:列名; dataIndex: 对应数据源中的键值(kay)
        {
          title: "用户名",
          dataIndex: "teacherName",
        },
        {
          title: "学校名称",
          dataIndex: "schoolName",
        },
        {
          title: "系部名称",
          dataIndex: "deptName",
        },

        {
          title: "班级名称",
          dataIndex: "className",
        },

        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      id: "",
      // 数据源
      data: [
        //  键值key 对应列名, key为Vue 需要key 可以忽略
      ],
      pagination: {
        defaultPageSize: 5,
        position: "bottom",
        pageSize: 10,
        total: 0,
        pageSizeOptions: ["10", "15", "20", "25"],
        current: 1,
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
      },
      //   表头的配置条件
      sortedInfo: null,
    };
  },
  created() {
    this.getRoleMessage();
    // 分页查询数据
    this.searchRole();
    // this.getUserMessage();
  },
  methods: {
    // 批量删除按钮 确认弹框
    confirm2(e) {
      this.mutiDelete();
    },
    // 批量删除按钮 取消弹框
    cancel2() {},

    // 批量删除
    async mutiDelete() {
      const { data: res } = await this.$http.delete("/admin/teacher/classes", {
        data: {
          ids: this.idList,
        },
      });
      if (res.code == 200) {
        // this.$message.success("删除成功");
        this.common.notify("success", "删除成功");
        this.getRoleMessage();
      } else {
        //
        this.common.notify("warning", "无法删除请重新选择");
        // this.$message.warning("无法删除,请重新选择");
      }
    },

    modifyItem(record) {},

    // 查询用户
    async toSearch() {
      console.log("123");
      let { record } = this.$route.params;
      this.id = record.id;
      const { data: res } = await this.$http.get(
        `/admin/teacher/classes?userId=${record.id}&page=${this.pagination.current}&size=${this.pagination.pageSize}
        &className=${this.searchClassName}
        &deptName=${this.searchDepartmentName}
        &schoolName=${this.searchSchoolName}
        `
      );
      this.data = res.data.records;
      this.pagination.total = Number(res.data.total);
    },
    toAdd() {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(); //userId 传入
        // 清空表单 发送请求 获取表单项的部分选择数据.
      });
    },
    async deleteItem(item) {
      let ids = [item.id];
      const { data: res } = await this.$http.delete("/admin/teacher/classes", {
        data: {
          ids: ids,
        },
      });
      if (res.code == 200) {
        // this.$message.success("删除成功");
        this.common.notify("success", "删除成功");
        this.getRoleMessage();
      }
    },
    // 分页点击切换
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      let that = this;
      that.sortedInfo = sorter;
      const pager = { ...that.pagination };
      pager.current = pagination.current;
      that.pagination = pager;
      this.searchRole();
    },

    // 分页查询
    async getRoleMessage(val) {
      this.searchRole();
    },
    // 分页查询显示
    async searchRole() {
      let { record } = this.$route.params;
      this.id = record.id;
      //  `/teacher/classes?userId=${record.id}&page=${this.pagination.current}&size=${this.pagination.pageSize}`
      const { data: res } = await this.$http.get(
        `/admin/teacher/classes?userId=${record.id}&page=${this.pagination.current}&size=${this.pagination.pageSize}`
      );

      this.data = res.data.records;
      this.pagination.total = Number(res.data.total);
    },
  },
  computed: {
    //   表格选中的配置项
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          let ids = [];
          selectedRows.forEach((item) => {
            ids.push(item.id);
          });
          this.idList = ids;
          console.log("idList", this.idList);
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
};
</script>
<style  lang='less' scoped>
.container {
  box-sizing: border-box;
  display: flex;
  background-color: #eef1f2;
  overflow: hidden;
  padding: 35px 75px;

  .main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    overflow: hidden;
    background-color: #eef1f2;
    // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    .main_content {
      padding: 20px;
      padding-top: 20px;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 10px;
      .main_header {
        display: flex;
        margin-bottom: 25px;
        .main_table {
          margin-top: 50px;
        }
      }
    }
  }
}
/deep/ .ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  text-align: center;
}
/deep/ .ant-table-tbody > tr > td {
  text-align: center !important;
}

.disableColor {
  color: #eee;
}
</style>